<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <script src="lib/esl.js"></script>
    <script src="lib/config.js"></script>
    <script src="lib/jquery.min.js"></script>
    <script src="lib/facePrint.js"></script>
    <script src="lib/testHelper.js"></script>
    <link rel="stylesheet" href="lib/reset.css"/>
</head>
<body>
<style>
    html, body, #main {
        width: 100%;
        height: 100%;
        margin: 0;
    }

    #main {
        background: #fff;
    }
</style>

<div id="main0"></div>
<div id="main1"></div>
<div id="main2"></div>

<script>

    require([
        'echarts'
    ], function (echarts) {

        var xAxisData = [];
        var data1 = [];
        var data2 = [];
        var data3 = [];
        var data4 = [];

        for (var i = 0; i < 100; i++) {
            xAxisData.push('类目' + i);
            data1.push((Math.random() * 5).toFixed(2));
            data2.push(Math.random().toFixed(2));
            data3.push((Math.random() + 0.5).toFixed(2));
            data4.push((Math.random() + 0.3).toFixed(2));
        }

        var data = [["4.70", "4.69", "2.48", "0.77", "3.08", "4.57", "2.68", "3.35", "0.37", "1.86", "2.68", "0.64", "1.82", "1.88", "0.31", "0.45", "4.48", "3.08", "1.58", "2.98", "1.87", "0.96", "3.43", "2.58", "0.41", "2.69", "0.59", "3.47", "4.33", "1.75", "0.51", "1.01", "1.60", "3.62", "2.29", "2.40", "1.52", "2.30", "0.18", "3.99", "0.26", "2.92", "2.94", "0.54", "2.98", "3.71", "2.24", "0.32", "1.98", "2.56", "1.81", "4.67", "2.49", "1.73", "1.79", "2.79", "3.39", "1.83", "3.24", "3.76", "1.23", "1.69", "3.55", "2.66", "1.83", "3.69", "2.70", "0.75", "0.71", "1.44", "3.23", "1.49", "1.50", "3.61", "4.41", "1.26", "2.93", "2.84", "4.11", "0.80", "2.67", "2.59", "2.71", "4.85", "1.28", "1.21", "4.32", "4.04", "1.15", "4.38", "4.41", "4.94", "4.13", "0.86", "1.97", "3.58", "3.02", "1.29", "1.47", "3.75"], ["0.78", "0.90", "0.54", "0.75", "0.68", "0.68", "0.84", "0.87", "0.78", "0.79", "0.77", "0.34", "0.81", "0.80", "0.28", "0.87", "0.98", "0.92", "0.66", "0.87", "0.88", "0.56", "0.34", "0.67", "0.60", "0.00", "0.22", "0.87", "0.81", "0.69", "0.41", "0.02", "0.18", "0.55", "0.48", "0.90", "0.62", "0.17", "0.37", "0.35", "0.31", "0.78", "0.34", "0.56", "0.22", "0.87", "0.55", "0.94", "0.58", "0.66", "0.33", "0.73", "0.78", "0.44", "0.79", "0.12", "0.81", "0.77", "0.33", "0.30", "0.86", "0.87", "0.09", "0.91", "0.90", "0.34", "0.76", "0.93", "0.55", "0.41", "0.63", "0.96", "0.80", "0.41", "0.53", "0.53", "0.66", "0.24", "0.24", "0.99", "0.92", "0.85", "0.44", "0.92", "0.28", "0.61", "0.20", "0.74", "0.52", "0.91", "0.42", "0.08", "0.00", "0.57", "0.81", "0.39", "0.41", "0.72", "0.02", "0.20"], ["1.17", "0.65", "0.98", "1.08", "1.02", "1.41", "1.01", "1.17", "0.63", "0.94", "0.78", "1.43", "0.67", "1.09", "1.29", "0.60", "0.50", "1.38", "0.76", "0.94", "0.79", "1.44", "0.55", "1.48", "1.13", "0.63", "1.07", "0.57", "1.43", "0.81", "0.87", "0.70", "1.04", "1.43", "1.00", "0.50", "0.54", "0.57", "0.97", "0.58", "1.19", "0.73", "0.76", "0.75", "1.39", "0.93", "0.60", "1.28", "1.14", "1.18", "0.60", "0.59", "1.46", "0.64", "1.44", "0.59", "1.49", "0.84", "0.71", "1.44", "1.11", "1.18", "1.40", "0.64", "1.15", "1.07", "1.35", "0.86", "1.13", "1.41", "1.03", "0.57", "1.44", "0.93", "1.47", "1.16", "1.40", "1.14", "0.97", "0.78", "1.49", "0.59", "0.99", "1.35", "0.88", "1.02", "1.16", "1.07", "0.81", "0.87", "1.34", "0.98", "1.17", "1.46", "0.71", "1.13", "0.80", "1.24", "0.76", "0.68"], ["1.04", "0.54", "0.55", "1.05", "1.20", "1.13", "0.53", "0.63", "0.82", "0.52", "0.86", "0.33", "0.64", "1.14", "0.47", "0.72", "0.97", "1.18", "1.02", "0.53", "1.14", "1.24", "1.13", "0.60", "0.47", "0.94", "0.64", "0.43", "0.71", "0.33", "0.46", "0.82", "0.80", "0.97", "0.43", "1.29", "0.65", "0.92", "0.63", "0.58", "0.31", "1.09", "0.35", "0.43", "1.19", "0.47", "0.59", "0.52", "0.79", "0.69", "0.54", "0.39", "0.33", "1.26", "0.40", "0.76", "0.80", "0.96", "0.82", "1.26", "0.70", "0.50", "0.67", "1.27", "1.24", "0.49", "0.94", "0.97", "0.90", "1.03", "1.28", "0.46", "0.57", "1.23", "0.40", "0.71", "1.08", "0.51", "1.03", "0.38", "0.81", "0.44", "1.02", "0.79", "1.08", "1.01", "0.66", "0.80", "0.65", "0.97", "0.56", "0.33", "0.61", "0.92", "0.40", "0.77", "1.05", "1.21", "0.34", "0.84"]];

        var option = {
            legend: {
                data: ['bar', 'bar2', 'bar3', 'bar4'],
                align: 'left'
            },
            toolbox: {
                // y: 'bottom',
                feature: {
                    magicType: {
                        type: ['line', 'bar', 'stack', 'tiled']
                    },
                    dataZoom: {
                        yAxisIndex: false
                    },
                    dataView: {},
                    saveAsImage: {
                        pixelRatio: 2
                    }
                }
            },
            tooltip: {},
            dataZoom: [{
                startValue: 48,
                endValue: 99,
                type: 'inside'
            }, {
                startValue: 48,
                endValue: 99,
                type: 'slider'
            }],
            xAxis: {
                data: xAxisData,
                silent: false,
                splitLine: {
                    show: false
                },
                splitArea: {
                    show: false
                }
            },
            yAxis: {
                splitArea: {
                    show: false
                }
            },
            series: [{
                name: 'bar',
                type: 'bar',
                stack: 'one',
                data: data[0]
            }, {
                show: false,
                name: 'bar2',
                type: 'bar',
                stack: 'one',
                data: data[1]
            }, {
                name: 'bar3',
                type: 'bar',
                stack: 'two',
                data: data[2]
            }, {
                name: 'bar4',
                type: 'bar',
                stack: 'two',
                data: data[3],
                silent: true
            }],
            animationDelay: function (idx) {
                return idx * 5;
            },
            animationDelayUpdate: function (idx) {
                return idx * 5;
            }
        }

        var chart = testHelper.create(echarts, 'main0', {
            option: option,
        });

        chart.on('click', function (params) {
            console.log(params);
        });
    });
</script>


<script>

    require([
        'echarts'/*, 'map/js/china' */
    ], function (echarts) {

        var option = {
            xAxis: [{
                type: 'category'
            }, {
                gridIndex: 1
            }],
            yAxis: [{}, {
                type: 'category',
                gridIndex: 1
            }],
            grid: [{
                containLabel: true,
                left: 10,
                right: '55%'
            }, {
                containLabel: true,
                left: '55%',
                right: 10
            }],
            tooltip: {},
            series: [{
                type: 'bar',
                large: true,
                largeThreshold: 2,
                data: [
                    ['mm', 33],
                    ['yy', -44],
                    ['tt', 55],
                    ['rr', 66]
                ]
            }, {
                type: 'bar',
                large: true,
                largeThreshold: 2,
                xAxisIndex: 1,
                yAxisIndex: 1,
                encode: {
                    x: 1,
                    y: 0
                },
                data: [
                    ['mm', 33],
                    ['yy', -44],
                    ['tt', 55],
                    ['rr', 66]
                ]
            }]
        };

        var chart = testHelper.create(echarts, 'main1', {
            option: option,
            title: [
                'bar in large mode',
                'click bar should alert',
                'tooltip should be ok'
            ]
        });

        chart.on('click', function (param) {
            alert('seriesIndex: ' + param.seriesIndex + ' dataIndex: ' + param.dataIndex);
            console.log(param);
        });
    });

</script>


<script>

    require([
        'echarts'/*, 'map/js/china' */
    ], function (echarts) {

        var option = {
            xAxis: [{
                type: 'category'
            }, {
                gridIndex: 1
            }],
            yAxis: [{}, {
                type: 'category',
                gridIndex: 1
            }],
            grid: [{
                containLabel: true,
                left: 10,
                right: '55%'
            }, {
                containLabel: true,
                left: '55%',
                right: 10
            }],
            tooltip: {},
            series: [{
                type: 'bar',
                large: true,
                largeThreshold: 2,
                progressive: 1,
                progressiveThreshold: 2,
                data: [
                    ['mm', 33],
                    ['yy', -44],
                    ['tt', 55],
                    ['rr', 66]
                ]
            }, {
                type: 'bar',
                large: true,
                largeThreshold: 2,
                progressive: 1,
                progressiveThreshold: 2,
                xAxisIndex: 1,
                yAxisIndex: 1,
                encode: {
                    x: 1,
                    y: 0
                },
                data: [
                    ['mm', 33],
                    ['yy', -44],
                    ['tt', 55],
                    ['rr', 66]
                ]
            }]
        };

        var chart = testHelper.create(echarts, 'main2', {
            option: option,
            title: [
                'progressive bar in large mode',
                'click bar should alert',
                'tooltip should be ok'
            ]
        });

        chart.on('click', function (param) {
            alert('seriesIndex: ' + param.seriesIndex + ' dataIndex: ' + param.dataIndex);
            console.log(param);
        });
    });

</script>


</body>
</html>
